<script setup>
import { defineProps } from "vue"
import management from "../left/components/management.vue";
import security from "../left/components/security.vue";
import CIMPlatform from "../left/components/CIM-platform.vue";
import energyTesting from "../left/components/energy-testing.vue";
import savingAnalysis from "../left/components/saving-analysis.vue";

const props = defineProps({
  componentsIndex: {
    default: '1',
    type: Number,
  }
});

const getComponent = (index) => {
  switch (index) {
    case 1:
      return management;
    case 2:
      return security;
    case 3:
      return CIMPlatform;
    case 4:
      return energyTesting;
    case 5:
      return savingAnalysis;
    default:
      // 返回默认组件或null
      return null;
  }
};

</script>

<template>
  <div>
    <transition name="fade" mode="out-in">
      <component :is="getComponent(componentsIndex)" />
    </transition>
  </div>
</template>

<style scoped lang="scss">
/* 定义进入的开始状态 */
.fade-enter-from {
  opacity: 0;
  transform: translateX(-50%);
  /* 从左侧进入 */
}

/* 定义进入的结束状态 */
.fade-enter-to {
  opacity: 1;
  transform: translateX(0);
  /* 移动到原位置 */
}

/* 定义离开的开始状态 */
.fade-leave-from {
  opacity: 1;
  transform: translateX(0);
  /* 从原位置开始离开 */
}

/* 定义离开的结束状态 */
.fade-leave-to {
  opacity: 0;
  transform: translateX(-50%);
  /* 向左侧离开 */
}

/* 定义过渡效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease, transform 0.5s ease;
}
</style>
